<template>
  <div class="index">
    <!-- 背景图 -->
    <div class="img_bj">
      <image :src="bj" style="width: 100%; height: 100%"></image>
      <div class="logo">
        <u--image
          :showLoading="true"
          :src="logo"
          width="41px"
          height="39px"
        ></u--image>
      </div>
    </div>
    <!-- 内容区块 -->
    <div class="content">
      <!-- 个人信息区域 -->
      <div class="personal" @click="goPersonal">
        <div class="personal_left">
          <div class="img">
            <u--image
              :showLoading="true"
              :src="personal.src"
              width="49px"
              height="61px"
            ></u--image>
          </div>
          <div class="text">
            <u--text text="王芳" align="center" size="18" bold></u--text>
            <div class="personal_tag">
              <u-tag
                text="已认证"
                type="success "
                shape="circle"
                size="mini"
              ></u-tag>
            </div>
          </div>
        </div>
        <div class="personal_right">
          <u-icon name="arrow-right" color="#fff"></u-icon>
        </div>
      </div>
      <!-- 内容模块区 -->
      <u-cell-group
        v-for="i in cellData"
        :key="i.id"
        border="false"
        :customStyle="{
          background: '#fff ',
          borderRadius: '10px',
          marginTop: '10px',
          overflow: 'hidden',
        }"
      >
        <u-cell
          v-for="item in i.cellModel"
          :key="item.id"
          :icon="item.icon"
          :title="item.title"
          :isLink="true"
          @click="goCellModel(item)"
          :iconStyle="{ width: '20px', height: '20px', margin: '0px 5px' }"
          :titleStyle="{
            fontSize: '17px',
            color: '#3e3e3e',
            fontFamily: 'PingFang-SC-Bold',
          }"
        ></u-cell>
      </u-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //背景图
      bj: require("@/static/index/index_bj.png"),
      //logo图
      logo: require("@/static/index/logo.png"),
      // 个人信息区
      personal: {
        src: "https://cdn.uviewui.com/uview/album/1.jpg",
      },
      // 内容模块区
      cellData: [
        {
          id: 1,
          cellModel: [
            {
              id: 1,
              icon: require("@/static/index/index_1.png"),
              title: "校园卡",
              url: "../../pages/alumniCard/notice",
            },
            {
              id: 2,
              icon: require("@/static/index/index_2.png"),
              title: "发现校友",
              url: "../../pages/findAlumni/findAlumni",
            },
            {
              id: 3,
              icon: require("@/static/index/index_3.png"),
              title: "学籍信息",
              url: "../../pages/personal/management",
            },
            {
              id: 4,
              icon: require("@/static/index/index_4.png"),
              title: "我的好友",
              url: "../../pages/myFriend/myFriend",
            },
          ],
        },
        {
          id: 2,
          cellModel: [
            {
              id: 5,
              icon: require("@/static/index/index_5.png"),
              title: "校庆专题",
              url: "../../pages/schoolProject/schoolProject",
            },
            {
              id: 6,
              icon: require("@/static/index/index_6.png"),
              title: "校园活动",
              url: "../../pages/alumniActivities/alumniActivities",
            },
            {
              id: 7,
              icon: require("@/static/index/index_7.png"),
              title: "校园资讯",
              url: "../../pages/alumniInformation/alumniInformation",
            },
          ],
        },
        {
          id: 3,
          cellModel: [
            {
              id: 8,
              icon: require("@/static/index/index_8.png"),
              title: "回馈母校",
              url: "../../pages/feedbackSchool/feedbackSchool",
            },
            {
              id: 9,
              icon: require("@/static/index/index_9.png"),
              title: "校园拾忆",
              url: "../../pages/schoolMemory/schoolMemory",
            },
            {
              id: 10,
              icon: require("@/static/index/index_10.png"),
              title: "校友组织",
              url: "../../pages/alumniOrganization/alumniOrganization",
            },
          ],
        },
      ],
    };
  },
  onShow() {
    //首页暂时不能一次性加载两个文件  请求没有放入队列中
    // this.activityNewest();
    this.$apis.list().then((res) => {
      console.log(res);
    });
  },
  onLoad() {},
  methods: {
    //个人信息区域
    goPersonal() {
      uni.navigateTo({
        url: `/pages/personal/personal`,
      });
    },
    //其它模块跳转
    goCellModel(item) {
      console.log(item);
      console.log(item.url);
      uni.navigateTo({
        url: item.url,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  height: 100%;

  .img_bj {
    width: 100%;
    height: 100vh;
    // position: absolute;
    // top: 0;
    // left: 0;
    position: relative;
    z-index: -1;

    .logo {
      position: absolute;
      left: 13px;
      top: 23px;
    }
  }

  //内容区块
  .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 79vh;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
    margin-top: 120px;
  }

  // 个人信息区域
  .personal {
    width: 100%;
    display: flex;
    padding: 15px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    background: #f8ca71;
    border-radius: 10px;
    overflow: hidden;

    .personal_left {
      display: flex;
      align-items: center;

      .img {
        margin-right: 10px;
      }

      .text {
        display: flex;
        flex-direction: column;

        .personal_tag {
          // width: 65px;
          margin-top: 8px;
        }
      }
    }
  }
}

.index /deep/.u-fade-enter-active.data-v-c6ecf840,
.u-fade-leave-active.data-v-c6ecf840 {
  width: 100%;
  height: 100%;
}

.index /deep/.u-cell__body.data-v-e835eb80 {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 17px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
}
</style>
